<template>
  <div class="top">
    <h2>首页</h2>
    <button @click="add">新增任务</button>
    <div class="center">
      <span>全部任务{{store.tasklist.length}}</span>
      <span>已完成{{store.tasklist.length-store.unlist}}</span>
      <span>未完成{{store.unlist}}</span>
    </div>

    <h3>任务列表</h3>
    <div class="bottom">
      <div :class="{renwu:true,active:!item.status}" v-for="(item, index) in store.tasklist" :key="index">
        <input :checked="item.status" @click="addstatus(item.id)" type="checkbox" />
        <span>{{ item.name }}</span>
        <span @click="dellist(item.id)">删除</span>
      </div>
    </div>
  </div>
  <router-view />
</template>

<script setup>
import { useRouter } from "vue-router";
import { useTasklistStore } from "../stores/tasklist";
var store = useTasklistStore();
var $router = useRouter();
// 点击转换新增页面
var add = () => {
  $router.push("/about");
}
// 点击进行状态切换
var addstatus =(id)=>{
  store.addstatus(id)
}

// 点击进行删除
var dellist = (id)=>{
  store.dellist(id)
}

</script>

<style scoped>
.top h2 {
  width: 100vw;
  text-align: center;
  margin: 2vh auto;
}
.top button {
  width: 100vw;
  height: 5vh;
  text-align: center;
  margin: 0 auto;
  border-radius: 25px;
  background-color: aquamarine;
}
.top .center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.top .center span {
  background-color: rgb(33, 146, 216);
  color: white;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  padding: 0 20px;
}
.top .center span.unfinished {
  background-color: red;
}
.top .bottom {
  line-height: 7vh;
  margin: 0 auto;
  text-align: center;
  width: 95vw;
  height: 7vh;
}
.top .bottom .renwu {
  line-height: 7vh;
  margin: 0 auto;
  text-align: center;
  width: 95vw;
  height: 7vh;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
  margin: 2vh auto;
  background-color: skyblue;
}
.top .bottom .renwu.active{
    background-color: red;
}
</style>
